<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="cheng5.du">
    
    <title>
        
            前端基础知识体系-运行环境 |
        
        cheng5.du
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/avatar.jpeg">
    
<link rel="stylesheet" href="/css/font-awesome.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpeg","favicon":"/images/avatar.jpeg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"人生海海，来日方长。"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":false,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                cheng5.du
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/netease"
                            >
                                网抑云
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/netease">网抑云</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">前端基础知识体系-运行环境</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpeg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">cheng5.du</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-05-13 22:12:52</span>
        <span class="mobile">2021-05-13 22:12</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">知识体系</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E6%80%BB%E7%BB%93/">总结</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h2 id="运行环境"><a href="#运行环境" class="headerlink" title="运行环境"></a>运行环境</h2><h3 id="网页加载渲染"><a href="#网页加载渲染" class="headerlink" title="网页加载渲染"></a>网页加载渲染</h3><h4 id="加载资源的形式"><a href="#加载资源的形式" class="headerlink" title="加载资源的形式"></a>加载资源的形式</h4><ol>
<li>HTML代码</li>
<li>媒体文件（图片、视频等）</li>
<li>JavaScript、CSS</li>
</ol>
<h4 id="加载资源的过程"><a href="#加载资源的过程" class="headerlink" title="加载资源的过程"></a>加载资源的过程</h4><ol>
<li>DNS解析：域名 &#x3D;&gt; IP地址</li>
<li>浏览器根据IP地址向服务器发起http请求</li>
<li>服务器处理http请求，并将结果返回给浏览器</li>
</ol>
<h4 id="渲染资源的过程"><a href="#渲染资源的过程" class="headerlink" title="渲染资源的过程"></a>渲染资源的过程</h4><p><img src="https://cdn.jsdelivr.net/gh/superFatDu/blogPics@main/20210511/htmlpage.2zv52ljd0cq0.png" alt="dom-tree"></p>
<ol>
<li>根据HTML代码生成DOM Tree</li>
<li>根据CSS代码生成CSSOM</li>
<li>将DOM Tree和CSSOM整合成Render Tree</li>
<li>根据Render Tree渲染页面</li>
<li>遇到&lt;script&gt;则暂停渲染，优先加载并执行JS代码，完成再继续</li>
<li>直至Render Tree渲染完成</li>
</ol>
<h4 id="一些面试题"><a href="#一些面试题" class="headerlink" title="一些面试题"></a>一些面试题</h4><h5 id="从输入URL到渲染出页面的整个过程"><a href="#从输入URL到渲染出页面的整个过程" class="headerlink" title="从输入URL到渲染出页面的整个过程"></a>从输入URL到渲染出页面的整个过程</h5><ol>
<li>下载资源：各个资源类型</li>
<li>渲染页面：结合HTML、CSS、JavaScript、图片等 &#x3D;&gt; 过程如上</li>
</ol>
<h5 id="window-onload和DOMContentLoaded的区别"><a href="#window-onload和DOMContentLoaded的区别" class="headerlink" title="window.onload和DOMContentLoaded的区别"></a>window.onload和DOMContentLoaded的区别</h5><ol>
<li>window.onload是等页面的全部资源加载完才会执行，包括图片、视频等</li>
<li>DOMContentLoaded是渲染完即可执行，此时图片、视频可能没有加载完</li>
</ol>
<h3 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h3><ol>
<li>多实用内存、缓存或其他方法</li>
<li>极少使用CPU计算量，减少网络加载耗时</li>
</ol>
<p>🚨 Notice：适用于所有编程的性能优化：空间换时间</p>
<h4 id="让加载更快"><a href="#让加载更快" class="headerlink" title="让加载更快"></a>让加载更快</h4><ol>
<li>减少资源体积：压缩代码</li>
<li>减少访问次数：合并代码，SSR服务器端渲染，缓存</li>
<li>更快的网络：CDN</li>
</ol>
<h4 id="让渲染更快"><a href="#让渲染更快" class="headerlink" title="让渲染更快"></a>让渲染更快</h4><ol>
<li>CSS放在head，JavaScript放在body下面</li>
<li>今早开始执行JS，用DOMContentLoaded触发</li>
<li>懒加载</li>
<li>DOM查询缓存</li>
<li>将频繁的DOM操作合并到一起（fragment）在插入DOM结构</li>
<li>防抖，节流</li>
</ol>
<h4 id="其他参照"><a href="#其他参照" class="headerlink" title="其他参照"></a>其他参照</h4><p><a class="link"   target="_blank" rel="noopener" href="https://www.duchengwu.top/2021/02/10/Vue%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" >Vue性能优化<i class="fas fa-external-link-alt"></i></a></p>
<h3 id="安全"><a href="#安全" class="headerlink" title="安全"></a>安全</h3><h4 id="创建的web前端攻击方式有哪些"><a href="#创建的web前端攻击方式有哪些" class="headerlink" title="创建的web前端攻击方式有哪些"></a>创建的web前端攻击方式有哪些</h4><h5 id="XSS跨站请求攻击"><a href="#XSS跨站请求攻击" class="headerlink" title="XSS跨站请求攻击"></a>XSS跨站请求攻击</h5><p>XSS（Cross Site Scripting）：跨站脚本攻击。</p>
<p>🚨 Notice：预防方式为：用&amp;lt；和&amp;gt；替换&lt; 和 &gt;。可以使npm的插件，也可以手动替换。</p>
<h5 id="XSRF跨站请求伪造"><a href="#XSRF跨站请求伪造" class="headerlink" title="XSRF跨站请求伪造"></a>XSRF跨站请求伪造</h5><p>CSRF(Cross-site Request Forgery)：跨站请求伪造。</p>
<p>比如接口 xxx.com&#x2F;pay?id&#x3D;100 是用用来购买商品的（假设没有验证），然后给他人发送一封邮件，隐藏着&lt;img src&#x3D;”xxx.com&#x2F;pay?id&#x3D;200”&gt;，这个人一点击图片就会购买商品。</p>
<p>🚨 Notice：预防方式为：1. 使用post接口；2. 增加验证，比如密码，指纹等等。</p>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/">#知识体系</a>&nbsp;
                    </li>
                
                    <li class="tag-item">
                        <a href="/tags/%E6%80%BB%E7%BB%93/">#总结</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/05/22/%E6%B8%85%E7%A9%BA%E6%95%B0%E7%BB%84%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">清空数组的几种方法</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/05/13/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB-HTTP/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">前端基础知识体系-HTTP</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">cheng5.du</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>








<div class="post-scripts">
    
</div>



</body>
</html>
